<template>
    <div class="app-container">
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <el-col :span="3" style="margin-right: 10px;">
                <el-select v-model="params.isHealthStatus" placeholder="健康状况">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="异常" value="1"></el-option>
                </el-select>
            </el-col>
            <el-button type="primary" @click="getHealth" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="addDialog = true;">健康状况申报</el-button>
        </el-row>
        <!-- 表格渲染 -->
        <el-table :data="tableData" stripe border v-loading="loading">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="stuId" label="学号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="currentCity" label="当前城市"></el-table-column>
            <el-table-column prop="currentLocation" label="具体地址"></el-table-column>
            <el-table-column prop="isHealthStatus" label="健康状态">
                <template slot-scope="scope">
                    <!-- <el-tag > -->
                        <span v-if="scope.row.isHealthStatus == 0"><el-tag type="success">正常</el-tag></span>
                        <span v-if="scope.row.isHealthStatus == 1"><el-tag type="danger">异常</el-tag></span>
                    <!-- </el-tag> -->
                </template>
            </el-table-column>
            <el-table-column prop="isInSchool" label="是否在校">
                <template slot-scope="scope">
                    <span v-if="scope.row.isInSchool == 0">是</span>
                    <span v-if="scope.row.isInSchool == 1">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="isHighRiskAreas" label="是否来自高风险">
                <template slot-scope="scope">
                    <span v-if="scope.row.isHighRiskAreas == 0"><el-tag type="success">否</el-tag></span>
                    <span v-if="scope.row.isHighRiskAreas == 1"><el-tag type="danger">是</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column prop="isPassHighRiskAreas" label="14天内是否途径高风险">
                <template slot-scope="scope">
                    <span v-if="scope.row.isPassHighRiskAreas == 0"><el-tag type="success">未经过</el-tag></span>
                    <span v-if="scope.row.isPassHighRiskAreas == 1"><el-tag type="danger">经过</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                        v-permission="['admin', 'housemaster']"
                        size="mini"
                        @click="infoShow(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        v-permission="['admin', 'student']"
                        size="mini"
                        @click="editHealthShow(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                        v-permission="['admin', 'student']"
                        size="mini"
                        type="danger"
                        @click="deleteHealth(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑表单 -->
        <el-dialog :visible.sync="editShow" @close="closeDialog">
            <el-form :model="editForm" :rules="rules" ref="editForm" labelPosition="left">
                <el-form-item label="当前城市" :label-width="formLabelWidth" prop="currentCity">
                    <el-input v-model="editForm.currentCity"></el-input>
                </el-form-item>
                <el-form-item label="具体地址" :label-width="formLabelWidth" prop="currentLocation">
                    <el-input v-model="editForm.currentLocation"></el-input>
                </el-form-item>
                <el-form-item label="健康码" :label-width="formLabelWidth" prop="isHealthCode">
                    <template>
                        <el-radio v-model="editForm.isHealthCode" label="0">正常</el-radio>
                        <el-radio v-model="editForm.isHealthCode" label="1">异常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="健康状态" :label-width="formLabelWidth" prop="isHealthStatus">
                    <template>
                        <el-radio v-model="editForm.isHealthStatus" label="0">正常</el-radio>
                        <el-radio v-model="editForm.isHealthStatus" label="1">异常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="是否在校" :label-width="formLabelWidth" prop="isInSchool">
                    <template>
                        <el-radio v-model="editForm.isInSchool" label="0">在校</el-radio>
                        <el-radio v-model="editForm.isInSchool" label="1">不在校</el-radio>
                    </template>
                </el-form-item>

                <el-form-item label="上午体温" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="editForm.temAm" label="0">正常</el-radio>
                        <el-radio v-model="editForm.temAm" label="1">不正常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="下午体温" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="editForm.temPm" label="0">正常</el-radio>
                        <el-radio v-model="editForm.temPm" label="1">不正常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="是否来自高风险" prop="isHighRiskAreas" :label-width="formLabelWidthl">
                    <template>
                        <el-radio v-model="editForm.isHighRiskAreas" label="0">否</el-radio>
                        <el-radio v-model="editForm.isHighRiskAreas" label="1">是</el-radio>
                    </template>
                </el-form-item>
                <el-form-item
                    label="14天内是否途径高风险"
                    prop="isPassHighRiskAreas"
                    :label-width="formLabelWidthl"
                >
                    <template>
                        <el-radio v-model="editForm.isPassHighRiskAreas" label="0">否</el-radio>
                        <el-radio v-model="editForm.isPassHighRiskAreas" label="1">是</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="明日计划" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="editForm.isTomorrowPlan" label="0">无</el-radio>
                        <el-radio v-model="editForm.isTomorrowPlan" label="1">有</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="明日计划" v-if="editForm.isTomorrowPlan == 1">
                    <el-input v-model="editForm.remark"></el-input>
                </el-form-item>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="editSubForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 添加表单 -->
        <el-dialog :visible.sync="addDialog" @close="addDialog = false">
            <el-form :model="addForm" :rules="rules" ref="addForm" labelPosition="left">
                <el-form-item label="当前城市" :label-width="formLabelWidth" prop="currentCity">
                    <el-input v-model="addForm.currentCity"></el-input>
                </el-form-item>
                <el-form-item label="具体地址" :label-width="formLabelWidth" prop="currentLocation">
                    <el-input v-model="addForm.currentLocation"></el-input>
                </el-form-item>
                <el-form-item label="健康码" :label-width="formLabelWidth" prop="isHealthCode">
                    <template>
                        <el-radio v-model="addForm.isHealthCode" label="0">正常</el-radio>
                        <el-radio v-model="addForm.isHealthCode" label="1">异常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="健康状态" :label-width="formLabelWidth" prop="isHealthStatus">
                    <template>
                        <el-radio v-model="addForm.isHealthStatus" label="0">正常</el-radio>
                        <el-radio v-model="addForm.isHealthStatus" label="1">异常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="是否在校" :label-width="formLabelWidth" prop="isInSchool">
                    <template>
                        <el-radio v-model="addForm.isInSchool" label="0">在校</el-radio>
                        <el-radio v-model="addForm.isInSchool" label="1">不在校</el-radio>
                    </template>
                </el-form-item>

                <el-form-item label="上午体温" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="addForm.temAm" label="0">正常</el-radio>
                        <el-radio v-model="addForm.temAm" label="1">不正常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="下午体温" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="addForm.temPm" label="0">正常</el-radio>
                        <el-radio v-model="addForm.temPm" label="1">不正常</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="是否来自高风险" prop="isHighRiskAreas" :label-width="formLabelWidthl">
                    <template>
                        <el-radio v-model="addForm.isHighRiskAreas" label="0">否</el-radio>
                        <el-radio v-model="addForm.isHighRiskAreas" label="1">是</el-radio>
                    </template>
                </el-form-item>
                <el-form-item
                    label="14天内是否途径高风险"
                    prop="isPassHighRiskAreas"
                    :label-width="formLabelWidthl"
                >
                    <template>
                        <el-radio v-model="addForm.isPassHighRiskAreas" label="0">否</el-radio>
                        <el-radio v-model="addForm.isPassHighRiskAreas" label="1">是</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="明日计划" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="addForm.isTomorrowPlan" label="0">无</el-radio>
                        <el-radio v-model="addForm.isTomorrowPlan" label="1">有</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="明日计划" v-if="addForm.isTomorrowPlan == 1">
                    <el-input v-model="addForm.remark"></el-input>
                </el-form-item>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="addSubForm()">提交</el-button>
                            <el-button @click="resetAddfForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getHealth, deleteHealth, updateHealth, saveHealth } from '@/api/epidemicprevention'
export default {
    data() {
        return {
            tableData: [],
            // 表格总条数
            total: 0,
            loading: false,
            formLabelWidth: "110px",
            formLabelWidthl: "170px",
            params: {
                pageCurrent: 1,
                pageSize: 10,
                isHealthStatus:null
            },
            editShow: false,
            addDialog: false,
            editForm: {},
            addForm: {},
            stuId: null,
            rules: {
                currentCity: [{ required: true, message: '不能为空', trigger: 'blur' }],
                currentLocation: [{ required: true, message: '不能为空', trigger: 'blur' }],
                isHealthCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
                isHealthStatus: [{ required: true, message: '不能为空', trigger: 'blur' }],
                isInSchool: [{ required: true, message: '不能为空', trigger: 'blur' }],
                isHighRiskAreas: [{ required: true, message: '不能为空', trigger: 'blur' }],
                isPassHighRiskAreas: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        }
    },
    computed: {
        ...mapGetters(["username"]),
    },
    mounted() {
        this.getHealth()
        let roles = JSON.parse(sessionStorage.getItem("roles"))
        this.stuId = roles.username
    },
    methods: {
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getHealth()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getHealth()
        },
        getHealth() {
            getHealth({
                username: this.username,
                pageCurrent: this.params.pageCurrent,
                pageSize: this.params.pageSize,
                isHealthStatus:this.params.isHealthStatus

            }).then((res) => {
                this.loading = true
                setTimeout(() => {
                    this.loading = true
                    console.log(res);
                    this.tableData = res.data.records
                    this.total = Number(res.data.total)
                    this.loading = false
                }, 200);

            }).catch((err) => {
                this.$message.error("请求错误")
            });
        },
        // 删除数据
        async deleteHealth(index, row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm !== 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteHealth(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.getHealth()
                    this.$message.success(res.msg)
                }
            })
        },
        // 编辑框展示
        editHealthShow(index, row) {
            this.editShow = true
            this.editForm = JSON.parse(JSON.stringify(row))
        },
        // 提交
        editSubForm() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    updateHealth(this.editForm).then((res) => {
                        this.getHealth()
                        this.editShow = false
                        this.$message.success(res.msg)
                    })
                }
            })


        },
        //添加
        // addSubForm(){
        //     console.log(this.addForm);
        //     this.$refs.addForm.validate((valid)=>{
        //         if (valid) {
        //             saveHealth(this.addForm).then((res)=>{
        //                 console.log(res);
        //             })
        //         }
        //     })
        // },
        addSubForm() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    saveHealth({
                        stuId: this.stuId,
                        currentCity: this.addForm.currentCity,
                        currentLocation: this.addForm.currentLocation,
                        isHealthCode: this.addForm.isHealthCode,
                        isHealthStatus: this.addForm.isHealthStatus,
                        isHighRiskAreas: this.addForm.isHighRiskAreas,
                        isInSchool: this.addForm.isInSchool,
                        isPassHighRiskAreas: this.addForm.isPassHighRiskAreas,
                        isTomorrowPlan: this.addForm.isTomorrowPlan,
                        temAm: this.addForm.temAm,
                        temPm: this.addForm.temPm,
                        remark: this.addForm.remark,
                    }).then((res) => {
                        this.getHealth()
                        this.addDialog = false
                        this.$message.success(res.msg)
                    })
                }
            })
        },



        // 重置编辑表单
        resetForm() {
            this.editForm = {}
            this.$refs.editForm.resetFields();
        },
        // 重置添加表单
        resetAddfForm() {
            this.addForm = {}
            this.$refs.addForm.resetFields();
        },
        // 弹出框关闭
        closeDialog() {
            this.editForm = {}
            this.$refs.editForm.resetFields();
        }
    },
}
</script>
<style lang="">
    
</style>